<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>找回密码</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background-color: #fff
        }

        .code {
            position: absolute;
            right: 5px;
            top: 23px;
            text-align: right;
            color: #DAD9D9;
            font-size: 14px;
            width: 80px;
        }

        .codeactive {
            color: #EA5717;
        }
    </style>
</head>

<body>
    <div id="vm">
        <div class="big-box">
            <div class="header">
                <img src="../../image/login/header-copy.png" class="copy" onclick="closeWin()"> 设置新密码
            </div>
            <div class="content">
                <div class="telephone">
                  <span  onclick="Openphone()">
                    +{{guojianumber}}<img src="../../image/login/downward.png" class="downward">
                  </span>
                    <input type="text" placeholder="请输入手机号" class="text" v-model="phonevalue" @focus="jiaodian()" @blur="shijiaodian()" v-on:input="mobileinput">
                    <img src="../../image/login/delete.png" class="delete" v-if="isshowdelete" @click="qingchu()">

                </div>
                <div class="telephone">
                    验证码
                    <input type="text" placeholder="短信验证码" class="text" v-model="msg" v-on:input="msginput">
                    <input type="button" value="获取验证码" class="code" v-on:click="countdown();" id="dao">
                </div>
                <div class="telephone">
                    <span v-if="dianjiflag">
                     密码&emsp;<input type="password" placeholder="请输入6-16位密码"  v-model="passwordvalue" v-on:input="addinput">
                     <img src="../../image/login/eyeclose.png" class="eyeclose" @click="transform()">
                   </span>
                    <span v-else>
                     密码&emsp;<input type="text" placeholder="请输入6-16位密码"  v-model="passwordvalue" v-on:input="addinput">
                     <img src="../../image/login/eye.png" class="eye"   @click="transforms()">
                   </span>
                </div>
                <div class="fourth" v-on:click="submit()">确定</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/login.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var mobile = $api.getStorage('mobile');
    var vm = new Vue({
        el: '#vm',
        data: {
            phonevalue: '',
            msg: '',
            passwordvalue: '',
            dianjiflag: true,
            isshowdelete: false,
            guojianumber: '86',
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                var header = $api.byId('aui-header');
                $api.fixStatusBar(header);
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                api.addEventListener({
                    name: 'number'
                }, function(ret, err) {
                    if (ret) {
                        _this.guojianumber = ret.value.number
                    }
                });
            }
        },
        methods: {
            init: function() {
                var _this = this;
                _this.phonevalue = '';
                _this.passwordvalue = '';
                _this.msg = '';
            },
            qingchu: function() {
                var _this = this;
                _this.phonevalue = '';
                if (this.phonevalue && this.msg && this.passwordvalue) {
                    $('.fourth').addClass('fourthactive');
                } else {
                    $('.fourth').removeClass('fourthactive');
                }
            },
            mobileinput() {
                var _this = this;
                if (_this.phonevalue.length > 0) {
                    _this.isshowdelete = true;
                    $('.code').addClass('codeactive');
                } else {
                    _this.isshowdelete = false;
                    $('.code').removeClass('codeactive');

                }
                if (this.phonevalue && this.msg && this.passwordvalue) {
                    $('.fourth').addClass('fourthactive');
                } else {
                    $('.fourth').removeClass('fourthactive');
                }
            },
            msginput() {
                this.msg = this.msg.substr(0, 4);

                // if (this.msg) {
                //     $('.code').addClass('codeactive');
                // } else {
                //     $('.code').removeClass('codeactive');
                // }
                if (this.phonevalue && this.msg && this.passwordvalue) {
                    $('.fourth').addClass('fourthactive');
                } else {
                    $('.fourth').removeClass('fourthactive');
                }
            },
            jiaodian() {
                // 输入框获取焦点
                var _this = this;
                _this.isshowdelete = true
            },
            shijiaodian() {
                // 输入框失去焦点
                var _this = this;
                _this.isshowdelete = false
            },
            transform: function() {
                var _this = this;
                _this.dianjiflag = false;
            },
            transforms: function() {
                var _this = this;
                _this.dianjiflag = true;
            },
            addinput: function() {
                var _this = this;
                _this.passwordvalue = _this.passwordvalue.replace(/[^\w\/]/ig, '');
                _this.passwordvalue = _this.passwordvalue.substr(0, 16);
                if (this.phonevalue && this.msg && this.passwordvalue) {
                    $('.fourth').addClass('fourthactive');
                } else {
                    $('.fourth').removeClass('fourthactive');
                }
            },
            submit: function() {
                var _this = this;
                if (M.phone(_this.phonevalue)) {
                    if (M.yanzhengma(_this.msg)) {
                        if (M.password(_this.passwordvalue)) {
                            new rest().get('rePassword').datae({
                                'mobile': _this.guojianumber+_this.phonevalue,
                                'msg': _this.msg,
                                'password': _this.passwordvalue,
                            }).success(function(res) {
                                if (res.flag == 1) {
                                    api.toast({
                                        msg: '修改成功',
                                        duration: 2000,
                                        location: 'middle'
                                    });

                                    setTimeout(function() {
                                        api.closeWin();
                                    }, 200)
                                } else {
                                    api.toast({
                                        msg: res.msg,
                                        duration: 2000,
                                        location: 'middle'
                                    });
                                }

                            }).error(function(err) {
                                api.toast({
                                    msg: err.msg,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }).run()
                        }
                    }
                }
            },
            countdown: function() {
                var _this = this;
                if (M.phone(_this.phonevalue)) {
                  new rest().post('getMobileSms').datae({
                      'mobile':_this.guojianumber+_this.phonevalue,
                  }).success(function(res) {
                    if(res.msg){
                      _this.sendmsg()
                    }else{
                      api.toast({
                          msg: '该手机号未注册',
                          duration: 2000,
                          location: 'middle'
                      });
                    }
                  }).error(function(err) {
                      api.toast({
                          msg: err.msg,
                          duration: 2000,
                          location: 'middle'
                      });
                  }).run()

                }
            },
            sendmsg:function() {
              var _this = this,msgflag;
              var name = document.getElementById("dao").className;
              new rest().get('sendSms').datae({
                  'mobile': _this.guojianumber+_this.phonevalue
              }).success(function(res) {
                  if (res.flag == 1) {
                    api.toast({
                        msg: '发送成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                      msgflag = true;
                      M.daojishi(msgflag, name)
                  }
                  else {
                      msgflag = false;
                      M.daojishi(msgflag, name)
                      api.toast({
                          msg: res.msg,
                          duration: 2000,
                          location: 'middle'
                      });
                  }
              }).error(function(err) {
                  api.toast({
                      msg: err.msg,
                      duration: 2000,
                      location: 'middle'
                  });
              }).run()
            }
        }
    })
    function Openpasswordnew() {
        api.openWin({
            name: 'password_new',
            url: './password-new.html',
        });
    }
    function closeWin() {
        api.closeWin();
    }
    function Openphone() {
        api.openWin({
            name: 'arearegion',
            url: 'area-region-win.html',
        });
    }
</script>

</html>
